<template>
    <div class="title">
        <h3>富文本编辑器- <a href="https://www.wangeditor.com/v5/for-frame.html#demo-1">wangeditor</a></h3>
    </div>
    <div class="editor-div">
        <div style="border: 1px solid #ccc">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" />
            <Editor style="height: 480px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
                :mode="mode" @onCreated="handleCreated" />
        </div>
    </div>

</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css


import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const editorRef = shallowRef(null);

const mode = ref("simple")
// 内容
let valueHtml = ref('');
const toolbarConfig = {}
const editorConfig = { placeholder: "请输入内容" }

const handleCreated = (editor) => {
    editorRef.value = editor; // 保存 editor 引用
}

onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
})

</script>

<style scoped>
.title{
    text-align: center;
}
.editor-div{
    margin-top: 5px;
    overflow-y: auto;
    min-height: 490px;
}
</style>